<template>
  <div class="dropDownBtn">
    <el-dropdown
      size="mini"
      type="primary"
      trigger="click"
      @command="handlerCommand($event, id)"
    >
      <el-button
        type="primary"
        :loading="loading"
        :disabled="disabled"
      >
        {{ label }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item,index) in dropdownItemList"
          :key="index"
          :command="item.command"
          :icon="item.icon"
        >
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script lang='ts'>
import { DropdownOption } from '@/models/form'
import { isEmpty, isNotEmpty } from '@/utils/validate'
import { Component, Vue, Emit, Prop } from 'vue-property-decorator'

@Component({})
export default class DropdownBtn extends Vue {
  @Prop() loading!: boolean;
  @Prop() btnList!: any[];
  @Prop() id!: number;
  @Prop({ default: '编辑' }) label!: string;
  @Prop({ default: false }) disabled!: boolean;

  @Emit()
  handlerCommand(command: any, id: number) {}

  get dropdownItemList() {
    return this.btnList.filter((item: DropdownOption) => isEmpty(item.permission) || (item.permission && this.$hasPermission(item.permission)))
  }
}
</script>

<style lang="scss" scoped></style>
